<template>
    <div id="app">
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="id"
                    label="编号"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="书名"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="author"
                    label="作者"
                    width="120">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="prev, pager, next"
                :page-size="pageSize"
                :total="pageTotal"
                @current-change="page" v-model="currentPage">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                currentPage: 0,
                pageSize: 0,
                pageTotal: 0,
                tableData: []
            }
        },
        methods: {
            del(row) {
                let id = row.id;
                const _this = this;
                this.$confirm('确定要删除吗?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete("http://localhost:8081/book/delete/" + id).then(function (res) {
                        window.location.reload()
                    });
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            edit(row) {
                this.$router.push({
                    path: "/updateBook",
                    query: {
                        id: row.id
                    }
                })
            },
            page(currentPage) {
                const _this = this;
                axios.get("http://localhost:8081/book/list/" + currentPage + "/5")
                    .then(function (res) {
                        _this.tableData = res.data.data;
                        _this.pageTotal = res.data.total;
                        _this.pageSize = 5;
                    })
            }
        },
        created() {
            const _this = this;
            axios.get("http://localhost:8081/book/list/1/5")
                .then(function (res) {
                    //console.log(res);
                    _this.tableData = res.data.data;
                    _this.pageTotal = res.data.total;
                    _this.pageSize = res.data.data.length;
                })
        }
    }
</script>